<template>
  <div>
<!--    <el-button type="primary" icon="el-icon-back"-->
<!--               style="position: fixed ;z-index: 999;display: flex; margin-top: -35px"-->
<!--               @click="$router.back(-1)">返回-->
<!--    </el-button>-->
    <el-main class="user-userinfo">
      <div>
        <el-avatar :size="100" style="font-size: 200%">{{ avatar }}</el-avatar>
      </div>
      <el-form :model="docInfo" :disabled="disabled">
        <div class="row">
          <el-form-item class="col-sm-6" label="姓名">
            <el-input v-model="docInfo.name"></el-input>
          </el-form-item>
          <el-form-item class="col-sm-6" label="id">
            <el-input v-model="docInfo.id"></el-input>
          </el-form-item>
        </div>
        <div class="row">
          <el-form-item class="col-sm-6" label="性别">
            <el-input v-model="docInfo.sex"></el-input>
          </el-form-item>
          <el-form-item class="col-sm-6" label="年龄">
            <el-input v-model="docInfo.age"></el-input>
          </el-form-item>
        </div>

        <div class="row">
          <el-form-item class="col-sm-6" label="工号">
            <el-input v-model="docInfo.jobNum"></el-input>
          </el-form-item>
          <el-form-item class="col-sm-6" label="职称">
            <el-input v-model="docInfo.title"></el-input>
          </el-form-item>
        </div>

        <div class="row">
          <el-form-item class="col-sm-6" label="研究方向">
            <el-input v-model="docInfo.indicationDirection"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="edit-button">
        <el-button type="primary" @click.stop="editUserInfo">{{ btnTitle }}</el-button>
        <el-button v-show="!disabled" @click.stop="cancelEdit">取消</el-button>
      </div>
    </el-main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      docInfo: {},
      DocId: null,
      disabled: true
    }
  },
  computed: {
    avatar() {
      const name = this.docInfo.name
      const nameList = String(name).split('')
      return nameList[nameList.length - 2] + nameList[nameList.length - 1]
    },
    btnTitle() {
      return this.disabled ? "编辑" : "保存"
    }
  },
  methods: {
    cancelEdit() {
      this.disabled = true
      this.docInfoInit()
    },
    async editUserInfo() {
      if (!this.disabled) {
        const docInfo = this.$util.jsonToParse(this.docInfo)
        docInfo.docSex = docInfo.docSex === "女" ? 0 : "1"
        // const result = await api.getDocInfo(docInfo)
        // if (result.code === 200) {
        //   this.$util.successMessage("修改成功")
        //   await this.$store.dispatch("setDocInfo")
        // } else {
        //   this.$util.errorMessage(result.msg)
        // }
        this.docInfoInit()
      }
      this.disabled = !this.disabled
    },
    docInfoInit() {
      const data = this.$util.jsonToParse(this.$store.state.adminModules.adminInfo)
      data.sex = data.sex === 0 ? "女" : "男"
      this.docInfo = data
    }
  },
  mounted() {
    this.docInfoInit()
    const {DocId,edit } = this.$route.params
    if (DocId){
      this.DocId = DocId
      this.$store.dispatch("getDocInfo", DocId)
    }
    if (edit){
      this.disabled = false
    }
  }
}
</script>

